<template>
     <el-container> 
    <el-main>
      <el-row type="flex" justify="center">
        <el-col :span="10">
          <el-form :model="formData" ref="ruleForm" label-width="120px" size="mini" label-position="right">
            <el-alert title="提示:当前远程备份只支持ssh远程和mysql数据库" type="warning" center show-icon></el-alert>
            <el-divider>SSH配置</el-divider>
            <el-form-item label="主机地址"  prop="host" :rules="[{ required: true, message: '请输入主机地址', trigger: 'blur' }]">
              <el-input v-model="formData.host" placeholder="主机地址"></el-input>
            </el-form-item>
            <el-form-item label="SSH端口" prop="sshport" :rules="[{ required: true, message: '请输入SSH端口', trigger: 'blur' }]">
              <el-input v-model="formData.sshport" placeholder="端口"></el-input>
            </el-form-item>
            <el-form-item label="SSH用户名" prop="sshuser" :rules="[{ required: true, message: '请输入SSH用户名', trigger: 'blur' }]">
              <el-input v-model="formData.sshuser" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="SSH密码" prop="sshpwd" :rules="[{ required: true, message: '请输入SSH密码', trigger: 'blur' }]">
              <el-input v-model="formData.sshpwd" placeholder="密码"></el-input>
            </el-form-item>
            <el-divider>MySQL配置</el-divider>
            <el-form-item label="SQL主机地址" prop="dbhost" :rules="[{ required: true, message: '请输入SQL主机地址', trigger: 'blur' }]">
              <el-input v-model="formData.dbhost" placeholder="主机地址"></el-input>
            </el-form-item>
            <el-form-item label="SQL端口" prop="dbport" :rules="[{ required: true, message: '请输入SQL端口', trigger: 'blur' }]">
              <el-input v-model="formData.dbport" placeholder="端口"></el-input>
            </el-form-item>
            <el-form-item label="SQL用户名" prop="dbuser" :rules="[{ required: true, message: '请输入SQL用户名', trigger: 'blur' }]">
              <el-input v-model="formData.dbuser" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="SQL密码" prop="dbpwd" :rules="[{ required: true, message: '请输入SQL密码', trigger: 'blur' }]">
              <el-input v-model="formData.dbpwd" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="数据库名" prop="dbname" :rules="[{ required: true, message: '请输入数据库名', trigger: 'blur' }]">
              <el-input v-model="formData.dbname" placeholder="数据库名"></el-input>
            </el-form-item>
            <el-divider>任务配置</el-divider>
            <el-form-item label="本地保存">
              <el-switch
                v-model="localsave"
                active-text="保存"
                inactive-text="不保存"
                @change="savepathfunc"
              ></el-switch>
            </el-form-item>
            <div v-if="localsave">
                <el-form-item label="存储路径">
                    <el-input v-model="formData.savepath" :disabled="true">
                        <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="enableDirSearch('savepath')"
                        ></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="是否加密">
                    <el-switch v-model="enablezippwd"></el-switch>
                </el-form-item>
                <el-form-item label="压缩密码" v-if="enablezippwd">
                    <el-input v-model="formData.zippwd" show-password></el-input>
                </el-form-item>
                <el-form-item label="远程存储">
                    <el-select v-model="formData.rs" multiple>
                        <el-option
                        v-for="item in remotestorages"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="执行频率">
                <el-select v-model="pinlv" @change="changepinlv">
                    <el-option
                    v-for="item in pinlvs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期" v-if="pinlv == 'month'">
                <el-select v-model="day" placeholder="请选择" @change="cjobs">
                    <el-option
                    v-for="item in days"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="周" v-if="pinlv == 'week'">
            <el-select v-model="week" placeholder="请选择" @change="cjobs">
                <el-option
                v-for="item in weeks"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="时间点">
            <el-time-picker
                v-model="times"
                placeholder="任意时间点"
                @change="createjobs"
                value-format="H m s"
            ></el-time-picker>
            </el-form-item>
            <el-form-item
            label="计划任务"
            prop="crontab"
            :rules="[
                { required: true, message: '请输入 计划任务', trigger: 'blur' }
            ]"
            >
                <el-input v-model="formData.crontab"></el-input>
            </el-form-item>
            <el-form-item label="本地备份保留数" v-if="localsave">
            <el-input-number v-model="formData.expire" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label>
                <el-button type="primary" @click="addsshtask" v-if="taskId == ''">添加</el-button>
                <el-button type="primary" @click="updatesshtask" v-else>修改</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-dialog
        title="请选择"
        :visible.sync="dialogDirVisible"
        width="30%"
        append-to-body
        v-if="dialogDirVisible"
      >
        <dirlist :dialogDirVisible="dialogDirVisible" :key-name="keyName" @close="changeDir"></dirlist>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import Dirlist from "@/components/Dirlist.vue";

export default {
  components: { Dirlist },
  data() {
    return {
      formData: { 
        crontab: "",
        expire:1 
      },
      localsave: false,
      keyName: "",
      dialogDirVisible: false,
      enablezippwd: false,
      remotestorages: [],
      day: "1",
      week: "1",
      times: "",
      pinlv: "day",
      pinlvs: [
        { value: "day", label: "天" },
        { value: "week", label: "周" },
        { value: "month", label: "月" },
      ],
      weeks: [
        { value: "1", label: "周一" },
        { value: "2", label: "周二" },
        { value: "3", label: "周三" },
        { value: "4", label: "周四" },
        { value: "5", label: "周五" },
        { value: "6", label: "周六" },
        { value: "0", label: "周日" },
      ],
      days: [
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" },
        { value: "5", label: "5" },
        { value: "6", label: "6" },
        { value: "7", label: "7" },
        { value: "8", label: "8" },
        { value: "9", label: "9" },
        { value: "10", label: "10" },
        { value: "11", label: "11" },
        { value: "12", label: "12" },
        { value: "13", label: "13" },
        { value: "14", label: "14" },
        { value: "15", label: "15" },
        { value: "16", label: "16" },
        { value: "17", label: "17" },
        { value: "18", label: "18" },
        { value: "19", label: "19" },
        { value: "20", label: "20" },
        { value: "21", label: "21" },
        { value: "22", label: "22" },
        { value: "23", label: "23" },
        { value: "24", label: "24" },
        { value: "25", label: "25" },
        { value: "26", label: "26" },
        { value: "27", label: "27" },
        { value: "28", label: "28" },
        { value: "29", label: "29" },
        { value: "30", label: "30" },
        { value: "31", label: "31" },
        { value: "L", label: "最后一天" },
      ],
      taskId: ""
    };
  },
  created(){
    console.log(this.$route)
    if(this.$route.query.id ){
        this.taskId = this.$route.query.id
        this.getsshtask(this.taskId)
    }
    this.ftpGet() 
  },
  methods: {
    getsshtask(id){
      this.$http.Get(this.$api.sshtask+"/"+id,{}, (res)=>{
        if(res.savepath === ""){
          this.localsave = false
        }else{
          this.localsave = true
        }
        if(this.zippwd === ""){
           this.enablezippwd=false
        }else{
          this.enablezippwd = true
        }
        console.log(this.enablezippwd = false)
        this.formData=res
      })
    },
    savepathfunc(e) {
      if (!e) {
        this.formData.savepath = "";
      }
      console.log(e);
    },
    createjobs(e) {
      this.times = e;
      this.cjobs();
    },
    changeDir(dirpath) {
      this.formData[dirpath.name] = dirpath.value;
      this.dialogDirVisible = false;
    },
    enableDirSearch(str) {
      this.keyName = str;
      this.dialogDirVisible = true;
    },
    ftpGet() {
      this.$http.Get(this.$api.ftps, { page: 1, count: -1 }, (res) => {
        console.log(res)
        this.remotestorages = res.data;
      });
    },
    changepinlv(e) {
      this.pinlv = e;
      this.cjobs();
    },
    cjobs() {
      var arrtimes = this.times.split(" ");
      var crontabstr = "";
      if (arrtimes.length === 3) {
        crontabstr = arrtimes[2] + " " + arrtimes[1] + " " + arrtimes[0];
        if (this.pinlv === "month" && this.day) {
          crontabstr = crontabstr + " " + this.day + " * *";
        } else if (this.pinlv === "week" && this.week) {
          crontabstr = crontabstr + " * * " + this.week;
        } else {
          crontabstr = crontabstr + " * * *";
        }
      }
      this.formData.crontab = crontabstr;
    },
    addsshtask() {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.$http.Post(this.$api.sshtask,this.formData,()=>{
                this.$router.go(-1)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    updatesshtask(){
        if(this.localsave === false){
            this.formData.rs=[]
            this.formData.savepath=""
            this.formData.zippwd=""
        }
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.$http.Put(this.$api.sshtask+"/"+this.taskId,this.formData,()=>{
                this.$router.go(-1)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
       
    }
  },
};
</script>
